package com.petplanet.common.ui.widgets

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchBar(
    modifier: Modifier = Modifier,
    searchAction: (String) -> Unit,
    placeholderText: String = "搜索",
    searchButtonVisible: Boolean = false,
    onValueChange: (String) -> Unit = {}
){
    Row(modifier = modifier
        .fillMaxWidth()
        .padding(vertical = 8.dp, horizontal = 16.dp)) {
        val (text, setText) = remember{
            mutableStateOf("")
        }
        TextField(
            value = text,
            onValueChange = {
                setText(it)
                onValueChange(it)
                            },
            modifier = Modifier
                .weight(1f)
                .height(36.dp)
            ,
            singleLine = true,
            placeholder = { Text(text = placeholderText, style = LocalTextStyle.current.copy(fontSize = 12.sp) )},
            textStyle = LocalTextStyle.current.copy(fontSize = 12.sp),
            colors = TextFieldDefaults.textFieldColors(
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent
            ),
            leadingIcon = {
                Icon(imageVector = Icons.Default.Search, contentDescription = "Search", modifier = Modifier
                    .size(20.dp)
                    .clickable { searchAction(text) })
            },
            trailingIcon = {
                Icon(imageVector = Icons.Default.Close, contentDescription = "Search", modifier = Modifier
                    .size(20.dp)
                    .clickable {
                        setText("")
                        onValueChange("")
                    })
            }
            )
        if (searchButtonVisible){
            Icon(
                imageVector = Icons.Default.Search,
                contentDescription = "Search",
                modifier = Modifier
                    .clickable { searchAction(text) }
                    .padding(horizontal = 8.dp)
                    .size(32.dp)
            )
        }
    }
}